<template>
  <transition name="dialog">
        <div 
            v-if="showUpdateDialog"
            id="dialog-bg"
            @scroll.prevent
            @touchmove.prevent >
            <div id="dialog" >
                <div id="info">
                    <div class="cancel" @click="toHomePage"><a>取消</a></div>
                    <div class="title">日用品</div>
                    <div class="confirm">确认修改</div>
                </div>
                <div class="detail">
                    <div class="type-img">
                        <img src="./images/日用品.png">
                    </div>
                    <div class="input-money">
                        <p>金额:</p><input type="number" placeholder="" v-model="money">
                    </div>
                    <div class="input-detail">
                        <p>备注:</p><input type="text" placeholder="" v-model="describe">
                    </div>
                </div>
                <div>
                    <el-date-picker
                        v-model="createDate"
                        type="date"
                        placeholder="选择日期"
                        class = 'date-picker'>
                    </el-date-picker>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name:'UpdateDialog',
    components: {
        
    },
    props:{
            showUpdateDialog: Boolean,
        },
    data() {
            return {
                createDate:new Date(),
                money:0,
                describe:null,
            }
        },

        
    methods: {
        confirm: function(){
            /*todo: */
            // this.$emit('closeUpdateDialog');
        },

        toHomePage(){
            this.$emit('closeUpdateDialog');
        },
        init_data(data){
            this.createDate = Date.parse(data.createDate);
            this.money = data.price;
            this.describe = data.describe;
        }
    },
    
    watch:{
        
    },
    mounted(){
        this.$bus.$on('initData',this.init_data);
    },

    beforeDestroy() {
        this.$bus.$off(['initData']);
    }
}
</script>

<style scoped>
* {
        box-sizing: border-box;
    }
    
    #dialog-bg{
        top: 0;
        left: 0;
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.5);
        z-index: 98;
    }
    
    #dialog{
        position: fixed;
        bottom: 0;
        background-color: #FFFFFF;
        height: 40vh;
        width: 100vw;
    }
    
    /* 适配电脑等大屏幕 */
    @media (min-width: 750px) {
        #dialog{
            width: 500px;
            left:0;
            right:0;
            margin:0 auto;
        }
    }

    #info{
        height:5vh;
        width:100vw;
        background: royalblue;
        padding-left: 5px;
        padding-right: 10px;
        position:relative;
    }

    .cancel{
        height: 5vh;
        width: 10vw;
        margin-left: 3vw;
        color: white;
        line-height: 5vh;
        text-decoration: none;
        font-size: 18px;
        float: left;
    }

    .title{
        height: 5vh;
        width: 15vw;
        margin-left: 30vw;
        color: white;
        line-height: 5vh;
        float: left;
        font-size: 18px;
    }

    .confirm{
        height: 5vh;
        width: 20vw;
        color: white;
        line-height: 5vh;
        float: right;
        font-size: 18px;
    }


    a:visited{
        color: white;
    }

    .detail{
        height: 15vh;
        width: 100%;
        /* background-color: black; */
    }

    .type-img{
        height: 7.5vh;
        width: 20vw;
        /* background-color: yellow; */
        line-height: 7.5vh;
        text-align: center;
        float: left;
    }
    .type-img img{
        height: 6vh;
        margin-top: 1vh;
    }

    .input-money{
        width: 80vw;
        height: 7.5vh;
        /* background-color: blue; */
        float: right;
    }

    .input-money p{
        position:absolute;
        right: 59vw;
        top: 5.4vh;
        font-size: 20px;
    }

    .input-money input{
        width: 70vw;
        float: right;
        margin-right: 5vw; 
        margin-top: 2vh;
        background:transparent;
        font-size: 25px;
        text-indent: 55px;
        border: solid 1px royalblue;
    }

    .input-detail{
        height: 7.5vh;
        width: 100%;
        /* background-color: red; */
        float: left;
        line-height: 7.5vh;
    }

    .input-detail p{
        position:absolute;
        left: 5vw;
        font-size: 20px;
    }
   
    .input-detail input{
        float: left;
        width: 95vw;
        margin-top: 2vh;
        font-size: 25px;
        background: transparent;
        border: solid 1px royalblue;
        text-indent: 55px;
    }

    

    .dialog-enter-active, .dialog-leave-active {
        transition: all .5s;
    }
    
    .dialog-enter, .dialog-leave-to {
        opacity: 0;
        transform: translateY(300px);
    }
</style>